<script setup lang="ts">
// import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import { delayTimer } from '@v-c/utils'
import eyesOpen from '@/assets/icons/eyes2.png'
import eyesClosed from '@/assets/icons/eyes1.png'
import { AxiosError } from 'axios'
import GlobalLayoutFooter from '~/layouts/components/global-footer/index.vue'
import { loginAdminApi, getCaptchaImageApi } from '~/api/common/login'
import { getQueryParam } from '~/utils/tools'
import type { LoginParams } from '~/api/common/login'
import pageBubble from '@/utils/page-bubble'
import { ref, reactive, nextTick, h } from 'vue';
import { Modal } from 'ant-design-vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
const message = useMessage()
const notification = useNotification()
const appStore = useAppStore()
const { layoutSetting } = storeToRefs(appStore)
const router = useRouter()
const token = useAuthorization()
const loginModel = reactive({
  userPhone: undefined,
  userPassword: undefined,
  mobile: undefined,
  code: undefined,
  captchaCode: undefined, // 图形验证码
  captchaId: undefined, // 图形验证码ID
  type: 'account',
  remember: true,
  agreeToTerms: false,
})

// 图形验证码状态
const captchaImage = ref<string>('')
const captchaLoading = ref(false)
const showPassword = ref(false)
const { t } = useI18nLocale()
const formRef = shallowRef()
const resetCounter = 60
const isMobileFocused = ref(false)
const yanzhengmaFocused = ref(false)
const submitLoading = shallowRef(false)
const errorAlert = shallowRef(false)
const bubbleCanvas = ref<HTMLCanvasElement>()


const {  pause} = useInterval(1000, {
  controls: true,
  immediate: false,
  callback(count) {
    if (count) {
      if (count === resetCounter) {
        pause()
      }
    }
  },
})



const handleInputFocus = ()=>{
  isMobileFocused.value = true;
}

const handleyanzhengmaInputFocus = ()=>{
  yanzhengmaFocused.value = true;
} 
const handleyanzhengmaInputoutFocus = ()=>{
  yanzhengmaFocused.value = false;
}
const handleInputoutFocus = ()=>{
  isMobileFocused.value = false;
}

function handleForgotClick() {
  // 使用 AntD Modal，字体更大且需用户确认
  Modal.info({
    title: '找回密码',
    content: h('div', {
      style: 'font-size:16px; line-height:24px; color:#333;'
    }, '请联系管理人员：曾维佳 19290112870'),
    icon: h(ExclamationCircleFilled, { style: 'color:#00BAC7;' }),
    okText: '确定',
    centered: true,
  })
}

// 获取图形验证码
async function loadCaptchaImage() {
  captchaLoading.value = true
  try {
    const response: any = await getCaptchaImageApi(loginModel.captchaId ? { captcha_id: loginModel.captchaId } : undefined)
    if (response && response.data) {
      captchaImage.value = `data:image/png;base64,${response.data.image_base64}`
      loginModel.captchaId = response.data.captcha_id
    }
  } catch (error: any) {
    // request.ts 已经统一处理了错误消息显示，这里不需要再处理
    // 如果是图形验证码错误，可以在这里添加特殊处理逻辑
  } finally {
    captchaLoading.value = false
  }
}

// 刷新图形验证码
function refreshCaptcha() {
  loadCaptchaImage()
}

// 切换密码显示/隐藏
function togglePassword() {
  showPassword.value = !showPassword.value
}

async function submit() {
  submitLoading.value = true
  try {
    // 如果两个输入都为空：只做校验提示，不发请求
    const mobileVal = String(loginModel.mobile ?? '').trim()
    const passwordVal = String(loginModel.userPassword ?? '').trim()
    if (!mobileVal && !passwordVal) {
      await formRef.value?.validate()
      submitLoading.value = false
      return
    }

    await formRef.value?.validate()
    let params: LoginParams

    if (loginModel.type === 'account') {
      // 验证码登录：校验手机号为11位数字与6位验证码
      const mobile = String(loginModel.mobile ?? '')
      if (!/^\d{11}$/.test(mobile))
        throw new Error('手机号需为11位数字')

      params = {
        phone: mobile,
        password: String(loginModel.userPassword ?? ''),
      } as LoginParams
    }
    else {
      // 密码登录
      params = {
        phone: String(loginModel.userPhone ?? ''),
        password: String(loginModel.userPassword ?? ''),
      } as LoginParams
    }

    try {
      const response = await loginAdminApi(params) as any
      // 新结构：{ code: 0, message: "OK", data: { userName, userCompany, userPhone, token } }
      if (response && response.code === 0) {
        token.value = response.data?.token || ''
        // 存储用户信息到localStorage
        localStorage.setItem('adminuserInfo', JSON.stringify({
          mobile: loginModel.mobile,
          userPhone: response.data?.userPhone,
        }))
        // 直接设置用户信息到store
        const userStore = useUserStore()
        userStore.setUserInfo({
          userName: loginModel.mobile,
          userPhone: response.data?.userPhone,
        })
        
        // 生成动态路由并添加到路由系统
        const dynamicRoute = await userStore.generateDynamicRoutes()
        router.addRoute(dynamicRoute)
        
        // 确保用户信息已正确设置
        if (!userStore.userInfo || Object.keys(userStore.userInfo).length === 0) {
          const localStorageUserInfo = localStorage.getItem('adminuserInfo')
          if (localStorageUserInfo) {
            userStore.setUserInfo(JSON.parse(localStorageUserInfo))
          }
        }
        
        notification.success({
          message: '登录成功',
          description: `欢迎回来，${response.data?.phone}`,
          duration: 3,
        })

        // 用localstage缓存用户信息
        
        // 获取当前是否存在重定向的答疑管理，如果存在就走重定向的地址
        let redirect = getQueryParam('redirect', '/dashboard/analysis')
        console.log('登录成功，准备跳转到:', redirect)
        console.log('当前路由:', router.currentRoute.value)
        
        // 如果 redirect 是完整 URL（包含 http:// 或 https://），使用 window.location.href
        if (redirect.startsWith('http://') || redirect.startsWith('https://')) {
          window.location.href = redirect
          return
        }
        
        // 处理路径：去掉 base 前缀（如果存在），因为 router.push 会自动添加
        let routePath = redirect
        if (routePath.startsWith('/registration_admin/')) {
          routePath = routePath.replace('/registration_admin', '')
        } else if (routePath.startsWith('/registration_pc/')) {
          routePath = routePath.replace('/registration_pc', '')
        }
        
        // 确保路径以 / 开头
        if (!routePath.startsWith('/')) {
          routePath = `/${routePath}`
        }

        // 使用 nextTick 确保在下一个事件循环中执行跳转，确保路由已添加
        await nextTick()
        
        // 使用 router.push，Vue Router 会自动处理 base 路径
        console.log('使用 router.push 跳转到:', routePath)
        await router.push(routePath)
      } else {
        // request.ts 已经统一处理了错误消息显示，这里不需要再处理
        submitLoading.value = false
        
        // 如果是图形验证码错误，自动刷新验证码
        if (response?.message?.includes('验证码') || response?.message?.includes('已过期')) {
          refreshCaptcha()
          loginModel.captchaCode = undefined
        }
      }
    }
    catch (e: any) {
      // request.ts 已经统一处理了错误消息显示，这里不需要再处理
      submitLoading.value = false
      
      // 如果是图形验证码错误，自动刷新验证码
      if (e?.isBusinessError && (e.message?.includes('验证码') || e.message?.includes('已过期'))) {
        refreshCaptcha()
        loginModel.captchaCode = undefined
      }
    }
  }
  catch (e) {
    if (e instanceof AxiosError)
      errorAlert.value = true
    else if (e instanceof Error)
      message.error({
        content: e.message
      })

    submitLoading.value = false
  }
}
onMounted(async () => {
  refreshCaptcha()
  await delayTimer(300)
  pageBubble.init(unref(bubbleCanvas)!)
  
  // 检查是否已经同意协议
  const accepted = localStorage.getItem('userAgreementAccepted')
  if (accepted === 'true') {
    loginModel.agreeToTerms = true
  }
  
  // 加载图形验证码
  await loadCaptchaImage()
})

onBeforeUnmount(() => {
  pageBubble.removeListeners()
})
</script>

<template>
  <div class="login-container" style="background-color: #ffffff;
  ">
    <div h-screen w-screen absolute z-10
    style="
    "
    >
<!-- 展示银行背景信息样式 -->




           <!-- 左右分栏 -->
        <div style="
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        ">

          <!-- #这边的左侧的border silid 能不能顺直展示一半啊？ -->
       
          <div style="
          width: 27.8%;
          height: 100%;
          border-left: 1px solid #d9d9d9;
          background-color: #8DD8D9;
          padding: 80px 50px 50px 50px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          ">
            <!-- 展示图片 -->
            <div
            style="
            width: 100%;
            height: 100%;
            position: relative;
            left: -26px;
            display: flex;
            align-items: center;
            justify-content: center;
            "
            class = "login-left-image"
            >
              <img
            src="../../../public/bg_login.png"
            style="
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            "
            />
       
          </div> 

          </div>


          <div style="
          width: 72.2%;
          height: 100%;
          background-color: #FFFFFF;
          ">
          <!-- 培新中心logo  加上 培训中心综合业务系统 -->
           <!-- flex横向布局 -->
            <div 
            class="flex-logo">
              <img 
              src="../../../public/child_logo.jpg"
              style="
              position:relative;
              top:28px;
              left:28px;
              width:120px;
              display: none;
              "
              />
              <img 
              src="../../assets/images/logo_admin.png"
              style="
              position:relative;
              top:1ch;
              left:10px;
              width: 38%;
              "
              />
              
              <span
              style="
              display: none;
              position:relative;
              font-size: 24px;
              color: black;
              top:15px;
              left:22px;
              font: 24px/1.5 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Arial, 'SimSun', sans-serif;
              color: #333; font-weight: 400;
              opacity: 0.8;
              "
              >
              中国国际贸易促进委员会
            </span>
              <br></br>
              <span
              style="
              display: none;
              position:relative;
              font-size: 24px;
              color: black;
              top:-21px;
              left:120px;
              letter-spacing: 23.8px;
              font: 24px/1.5 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Arial, 'SimSun', sans-serif;
              color: #333; font-weight: 400;
              opacity: 0.8;
              "
              >
              中国国际商会
              </span>
              <br></br>
              <span
              style="
              display: none;
              position:relative;
              font-size: 24px;
              color: black;
              top:-21px;
              opacity: 0.7;
              left:120px;
              font: 24px/1.5 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', Arial, 'SimSun', sans-serif;
              color: #333; font-weight: 400;
              "
              >
                CCPIT/CCOIC  TRAINNING CENTER
              </span>
                          <!-- 这里同时 
             第一行 中国国际贸易存进委员会
             第二行是中国国际商会
            培训中心 
            下面是大写的英文
            CCPIT/CCOIC  TRAINNING CENTER
            中国贸促 
            -->
            </div>

            <div
                @click="handleForgotClick"
            class="contact-us-link forgot-link"
            style="
            position: absolute;
            top: 5%;
            color: grey;
            font-size: 15px;
            right: 20px;
            cursor: pointer;
            transform: translate(-50%, -50%);
            "
            > 
              联系我们
            </div>

 
            <center>
              <div
                @click="handleForgotClick"
            class="contact-us-link forgot-link"
            style="
            position: absolute;
            top: 97%;
            color: grey;
            font-size: 15px;
            left: 64%;
            cursor: pointer;
            transform: translate(-50%, -50%);
            "
            
            > 
            Copyright © 2025 中国贸易报  All Rights Reserved
            </div>
            </center>
         
            
            <!-- 登录卡片 -->
            <div class="login-card"
            style="padding-top:80px ;
            padding-left: 34%;
            padding-top: 20%;
            "
            >
         
              <a-form 
                style="
                position: relative;
                top: -24px;
                width:460px;
                padding: 0 25px;
                "
                  ref="formRef" :model="loginModel">
            <center>
              <span style="
              font-size: 30px;
              font-weight: bold;
              font-family: '粗体';
              color: black;
              opacity: 0.8;
              ">
                登录
            </span>
            </center>

              <span style="opacity:0">0</span>
              <template v-if="loginModel.type === 'account'">
              
                <a-form-item
                class="form-item-inline-error"
                :validate-trigger="['blur']"
                name="mobile"
                :rules="[
                  { required: true, message: t('pages.login.phoneNumber.required') },
                  {
                    pattern: /^\d{11}$/,
                    message: t('pages.login.phoneNumber.invalid'),
                    validateTrigger: 'blur'
                  },
                ]"
                > 
                <div class="label-input-container">
                  <div class="icon-input-wrapper custom-input-bg">
                    <img src="@/assets/icons/user1.png" 
                    style="
                    width: 20px;
                    top: 22px;
                    height: 22px;
                    "
                    class="icon-inside-input" alt="" />
                    <a-input
                      class="icon-input"
                      placeholder="手机号"
                      style="
                      width: 400px;
                      background-color: #FFFFFF; 
                      border: 1px solid gainsboro; 
                      border-radius: 5px; flex: 1;
                      "
                      :maxlength="11"
                      v-model:value="loginModel.mobile"
                      size="large"
                      autocomplete="off"
                      @press-enter="submit"
                      @focus="handleInputFocus"
                      @blur="handleInputoutFocus"
                    />
                  </div>
                </div>
                </a-form-item>
               
                <a-form-item
                class="form-item-inline-error"
                name="userPassword" 
                    :validateTrigger = " ['blur']"
                    :rules="[
                  { required: true, message: '请输入密码' },
                  {
                    pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,12}$/,
                    message: '密码8~12位，包含字母和数字',
                    validateTrigger: 'blur'
                  },
                    ]"
                >
                <div class="label-input-container">
                  <div class="icon-input-wrapper custom-input-bg">
                    <img src="@/assets/icons/suo1.png" 
                    style="
                    width: 20px;
                    top: 22px;
                    height: 22px;
                    "
                    class="icon-inside-input" alt="" />
                   <img v-if="loginModel.userPassword" :src="showPassword ? eyesOpen : eyesClosed" 
                    style="
                    width: 20px;
                    top: 22px;
                   left: 91%;
                    height: 20px;
                    "
                    class="icon-inside-input icon-inside-clickable" alt="toggle" @click="togglePassword" />
                     <a-input
                    :type="showPassword ? 'text' : 'password'"
                      v-model:value="loginModel.userPassword"
                      class="icon-input"
                      placeholder="密码"
                      style="
                      width: 400px;
                      background-color: #FFFFFF; 
                      border: 1px solid gainsboro; 
                      border-radius: 5px; flex: 1;
                      "
                      :maxlength="12"
                      size="large"
                      autocomplete="off"
                      @press-enter="submit"
                      @focus="handleyanzhengmaInputFocus"
                      @blur="handleyanzhengmaInputoutFocus"
                     >
                    <!-- <template #suffix>
                          <span class="password-toggle-eye" @click="togglePassword">
                            <img v-if="showPassword" src="@/assets/icons/eyes2.png" class="password-eye-icon" alt="hide" />
                            <img v-else src="@/assets/icons/eyes1.png" class="password-eye-icon" alt="show" />
                          </span>
                        </template> -->
                    </a-input>
                    
                  </div>
                </div>
                </a-form-item>
              
              </template>




              <!-- 协议同意复选框 -->
   
              
              <a-button 
              class="login-submit-btn"
              :style="{
                backgroundColor: '#00BAC7',
                position: 'relative',
                color: 'rgba(255, 255, 255, 1.0)',
                top: '5px',
                height: '45px',
                width: '400px',
                fontSize: '19px',
                borderRadius: '3px',
                borderColor: '#8DD8D9',
                transition: 'all 0.3s ease'
              }"
              block :loading="submitLoading" size="large" @click="submit">
                {{ t('pages.login.submit') }}
              </a-button>
              <div
              style="
              flex: 2;
              display: flex;
              "
              >
            <div
            style="
            width:50%;
            margin-top: 17px;
            "
            >
          <span
          @click="handleForgotClick"
          class="forgot-link"
          style="
          color: #60656E;
          font-size: 14px;
          cursor: pointer;
          "
          >
            找回密码
          </span>
          </div>
            <div
            style="
            width:50%;
            "
            ></div>
            </div>
              
     
            </a-form>
            </div>

          </div>
        </div>

      <!-- 展示登录页面 -->
      
    </div>
   


<!-- 主题登录 -->










    <div py-24px px-50px fixed bottom-0 z-11 w-screen :data-theme="layoutSetting.theme" text-14px>
      <GlobalLayoutFooter
        :copyright="layoutSetting.copyright" icp=""
      >
        <template #renderFooterLinks>
          <footer-links />
        </template>
      </GlobalLayoutFooter>
    </div>
  </div>
</template>

<style lang="less" scoped>

/* 登录页 tabs 样式 */
.login-tabs {
  :deep(.ant-tabs-tab),
  :deep(.ant-tabs-tab-btn) {
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: '等线';
    color: #7c7c7c !important;
  }
  
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #4781D2 !important;
    font-weight: 500 !important;
  }
  
  :deep(.ant-tabs-ink-bar) {
    background-color: #4781D2 !important;
  }
}

/* 原生密码框样式 */
.password-input-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* 统一输入框样式 - 白色背景镂空效果 */
:deep(.ant-input) {
  height: 45px !important;
  font-size: 14px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

:deep(.ant-input:focus) {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 错误状态下的输入框样式 */
:deep(.ant-input-status-error.ant-input) {
  border-color: #ff4d4f !important;
}

:deep(.ant-input-status-error.ant-input:focus) {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}

/* 登录按钮样式调整 */
:deep(.ant-btn-primary) {
  height: 35px !important;
  font-size: 14px !important;
}

/* 统一输入框标签样式 - 横向布局 */
.label-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.input-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  min-width: 60px;
  flex-shrink: 0;
}

/* 移除浮动标签效果 */
.floating-label {
  display: none !important;
}

.password-input {
  width: 100%;
  height: 35px;
  padding: 8px 40px 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  background-color: #ffffff;
  outline: none;
  transition: all 0.3s ease;
}

.password-input:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 密码输入框后缀样式 */
.password-toggle-eye {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
  padding: 2px 4px;
  border-radius: 2px;
  border:none;
  user-select: none;
}

.password-toggle-eye:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* 密码后缀眼睛图标尺寸与对齐 */
.password-eye-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* 统一输入框高度 */
.password-input-wrapper {
  width: 100%;
}

.password-input-wrapper :deep(.ant-input) {
  height: 35px !important;
  padding-right: 40px !important;
  border: none !important; /* 去掉内层 input 的边框 */
  box-shadow: none !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper) {
  background-color: #ffffff !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper:hover) {
  border-color: #40a9ff !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-focused) {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 错误状态 */
.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error) {
  border-color: #ff4d4f !important;
}

.password-input-wrapper :deep(.ant-input-affix-wrapper-status-error:focus) {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}

.code-input-container {
  position: relative;
  width: 100%;
}

.input-with-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #ffffff;
  border-radius: 3px;
  overflow: hidden; /* 确保圆角效果 */
}

.code-input {
  flex: 1;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-right: 120px; /* 为按钮留出空间 */
}

.code-input:focus {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.code-button {
  position: absolute;
  right: 4px;
  height: 32px;
  border: none;
  box-shadow: none;
  background: transparent;
  color: #1976D2;
  font-size: 14px;
  padding: 5px 10px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  white-space: nowrap;
  z-index: 2;
}

.code-button:hover:not(.disabled) {
  background: transparent !important;
  color: #1976D2 !important;
  cursor: pointer;
}

.code-button.disabled,
.code-button:disabled {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

.code-button.disabled:hover,
.code-button:disabled:hover {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

/* 浮动标签样式调整 */
.floating-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #959595;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #ffffff;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #1890ff;
  transform: translateY(0);
  background-color: #fff;
}

/* 自定义表单验证错误消息样式 - 与输入框左侧对齐 */
:deep(.ant-form-item-explain-error) {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding-left: 92px !important; /* 60px label width + 12px gap */
  color: #ff4d4f !important; /* 红色错误文字 */
  font-size: 14px !important;
}





.floating-label-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.floating-label {
  font-weight: 400;
  -webkit-font-smoothing: auto; /* 关闭抗锯齿，获得粗糙感 */
  -moz-osx-font-smoothing: auto;
  text-shadow: 0.1px 0.1px 0.1px rgba(99, 99, 99, 0.1); /* 轻微阴影增强质感 */
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #c5c5c5;
  font-size: 14px;
  transition: all 0.2s ease;
  pointer-events: none;
  background-color: #F9F9F9;
  padding: 0 4px;
  z-index: 1;
}

.floating-label--active {
  top: 0;
  font-size: 12px;
  color: #959595;
  transform: translateY(0);
}

.floating-label-input {
  padding-top: 8px;
  height: 48px;
}

/* 调整输入框聚焦时的样式 */
.floating-label-input:focus {
  background-color: #fff;
  border: 1px solid #1890ff !important;
}

/* 确保标签在输入框聚焦时也显示 */
.floating-label-input:focus + .floating-label {
  top: 0;
  font-size: 12px;
  color: #8a8a8a;
  background-color: rgba(255, 255, 255, 0);
  transition: all 0.08s ease;
}

.login-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: var(--bg-color-container);
}

.login-lang {
  height: 40px;
  line-height: 44px;
}

.login-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ant-pro-form-login-container {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  padding: 32px 0;
  overflow: auto;
  background: inherit
}

.ant-pro-form-login-header a {
  text-decoration: none
}

.ant-pro-form-login-title {
  color: var(--text-color);
  font-weight: 600;
  font-size: 33px;
  line-height: 1;
}

.ant-pro-form-login-logo {
  width: 44px;
  height: 44px;
  margin-right: 16px;
  vertical-align: top
}

.ant-pro-form-login-desc {
  color: var(--text-color-1);
  font-size: 14px;
  margin-left: 16px
}

.ant-pro-form-login-main-right {
  .ant-tabs-nav-list {
    margin: 0 auto;
    font-size: 16px;
  }

  .ant-pro-form-login-other {
    line-height: 22px;
    text-align: center
  }

  /* 自定义选项卡颜色为#1976D2 */
  /* 使用更直接的选择器提高优先级 */
  &:deep(.ant-tabs-tab .ant-tabs-tab-btn) {
    color: #6d6d6d !important;
    font-weight: 00 !important; /* 加粗字体 */
    font-size: 17px;
    font-family: 粗体;
  }
  
  &:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #181818 !important;
    font-weight: 400 !important; /* 加粗字体 */


  }
  
  &:deep(.ant-tabs-ink-bar) {
    background-color: #256bd4 !important;
  }
  
  &:deep(.ant-tabs-tab:not(.ant-tabs-tab-active):hover .ant-tabs-tab-btn) {
    color: #000000 !important;
  }

}

.ant-pro-form-login-main{
  box-shadow: var(--c-shadow);
}

.icon {
  margin-left: 8px;
  color: var(--text-color-2);
  font-size: 24px;
  vertical-align: middle;
  cursor: pointer;
  transition: color .3s;

  &:hover {
    color: var(--pro-ant-color-primary);
  }
}

.forgot-link:hover {
  text-decoration: underline;
}

/* 登录按钮悬浮/聚焦边框颜色与主题一致 */
:deep(.login-submit-btn.ant-btn):hover,
:deep(.login-submit-btn.ant-btn):focus {
  border-color: #8DD8D9 !important;
}

/* 自定义输入框背景色 */
  .custom-input-bg {
    &:deep(.ant-input) {
      background-color: #ffffff !important;
    }
    
    &:deep(.ant-input-group-wrapper) {
      background-color: #ffffff !important;
    }
    
    /* 确保placeholder区域也被覆盖 */
    &:deep(.ant-input::placeholder) {
      background-color: #ffffff !important;
      opacity: 0.8;
      color: #959595 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }
    
    /* 兼容不同浏览器的placeholder样式 */
    &:deep(.ant-input:-ms-input-placeholder) {
      color: #F9F9F9 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }
    
    &:deep(.ant-input::-ms-input-placeholder) {
      color: #F9F9F9 !important; /* 调浅placeholder文字颜色 */
      font-weight: normal !important; /* 正常字体粗细 */
    }
  
  /* 针对有清除按钮的情况调整内边距 */
  &:has(.ant-input-clear-icon) {
    &:deep(.ant-input) {
      padding-right: 24px !important;
    }
  }
}

/* 带前缀图标的输入框样式 */
.with-prefix-input :deep(.ant-input-affix-wrapper) {
  background-color: #F9F9F9 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 4px !important;
  height: 35px !important;
}

.with-prefix-input :deep(.ant-input) {
  height: 33px !important;
}

.input-prefix-icon {
  width: 16px;
  height: 16px;
}

/* 表单校验信息右侧内联显示 + 感叹号 */
.form-item-inline-error {
  position: relative;
}

.form-item-inline-error :deep(.ant-form-item-explain) {
  position: absolute;
  top: 35%;
  right: 92px;
  transform: translate(100%, -50%);
  white-space: nowrap;
}

.form-item-inline-error :deep(.ant-form-item-explain-error) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.form-item-inline-error :deep(.ant-form-item-explain-error)::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

/* 纯原生视觉：左内嵌图标，不改变 Ant 输入框外观 */
.icon-input-wrapper {
  position: relative;
  width: 100%;
}

.icon-inside-input {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  z-index: 1;
  pointer-events: none; /* 点击仍然聚焦到输入框 */
}

/* 可点击版图标（覆盖 pointer-events） */
.icon-inside-clickable {
  pointer-events: auto;
  cursor: pointer;
}

.icon-input :deep(.ant-input) {
  padding-left: 48px !important; /* 图标(20) + 左边距(10) + 间距(18) */
  height: 45px !important;
  
}

/* 当 a-input 直接渲染为原生 input 时，类会落到同一元素上 */
:deep(.icon-input.ant-input) {
  padding-left: 30px !important;
  height: 45px !important;
}

/* 占位符更细的字重 */
.icon-input :deep(.ant-input::placeholder) {
  font-weight: 300 !important;
}

:deep(.icon-input.ant-input::placeholder) {
  font-weight: 300 !important;
}

.icon-input :deep(.ant-input:focus) {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}
.login-media(@width:100%) {
  .ant-pro-form-login-main{
    width: @width;
  }
  .ant-pro-form-login-main-left{
    display: none;
  }
  .ant-pro-form-login-main-right{
    width: 100%;
  }
  .ant-pro-form-login-desc{
    display: none;
  }
}
@media (min-width : 992px) {
  .ant-pro-form-login-main-left{
    width: 700px;
  }
}
@media(min-width:768px) and (max-width:991px){
  .ant-pro-login-divider{
    display: none;
  }
  .login-media(400px)
}
@media screen and (max-width:767px) {
  .login-media(350px);

  .ant-pro-login-divider{
    display: none;
  }
  
  // 移动端：外层容器宽度自适应，减少留白
  .ant-pro-form-login-main {
    width: 98% !important; // 从95%增加到98%，只影响移动端
  }
  
  // 移动端：登录卡片宽度自适应
  .box-border {
    width: 100% !important;
    min-height: auto !important;
  }
  
  // 移动端：隐藏左侧图片
  .login-left-image {
    display: none !important;
  }
  
  // 右侧表单区域在移动端全宽
  .ant-pro-form-login-main-right {
    width: 100% !important;
    padding: 20px 10px !important; // 减少左右内边距，只影响移动端
  }
  
  // 表单宽度调整
  .ant-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  // 调整输入框容器宽度
  .floating-label-container {
    width: 100% !important;
  }
  
  // 表单内容左右内边距调整
  .ant-form {
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 0 !important; // 移除偏移
  }
}
</style>
